// 头部
.layout_header_wrapper {
  width: 100%;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;

  //背景底图
  .header_bg {
    width: 100%;
    height: 100%;
    background-image: url('@/assets/header/header-bg.png');
    background-size: 100% 100%;
  }

  // 导航按钮盒子
  .header_content_box {
    width: 100%;
    height: 37px;
    position: absolute;
    top: 36px;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: flex-end;

    // 布局盒子
    .nav_position {
      height: 100%;
      flex: 0 auto;
      display: flex;
    }

    .site_box {
      flex: 1;
    }

    //左右菜单
    .lf_nav_box {
      justify-content: flex-start;
    }

    .rt_nav_box {
      justify-content: flex-end;
    }

    // 菜单项控件
    .nav_menu_item {
      width: 203px;
      height: 37px;

      color: #fff;
      font-weight: bold;

      display: flex;
      justify-content: center;
      align-items: center;

      background-size: 100%;
      background-image: url('@/assets/header/menu-item.png');
      background-repeat: no-repeat;

      cursor: pointer;
    }

    .nav_menu_item + .nav_menu_item {
      margin-left: 5px;
    }

    .nav_menu_item.menu_item_active {
      background-image: url('@/assets/header/menu-active.png');
    }
  }

  //右上角用户信息
  .rt_user_info {
    position: absolute;
    top: 5px;
    right: 23px;
    width: 140px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    text-align: left;
    color: #ffffff;
    letter-spacing: 1.04px;

    .setting-item {
      cursor: pointer;
      &:hover {
        color: #0d8cee;
      }

      &:hover .icon-my-settings {
        background-image: var(--icon-my-settings-hover);
      }
    }

    .icon-my-settings {
      margin-right: 6px;
    }
  }
}

//布局主体
.layout_main {
  width: 100%;
  height: 100%;
  overflow: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

//路由页
.layout_page_wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

//=============================常用布局类
.layout-relative {
  position: relative;
}

//=============================常用位置类
.fx-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-evenly {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scoll-warp {
  overflow-y: auto;
}

//=======================混入
.bg-image(@url) {
  background-image: url(@url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.nest-page {
  width: 100%;
  height: 100%;
  padding: 0px 20px 10px 20px;
  box-sizing: border-box;

  .breadcrumb {
    height: 30px;
    font-size: 16px;
    color: #9c9c9d;
    .menu-name {
      font-size: 18px;
      color: #298eff;
    }
  }
}

/*
    margin padding fontSize width 通用样式表
    免去你每次重写样式的烦恼
    marked by Jacky
*/
.loopStyle(@counter) when (@counter > 0) {
  .p-@{counter} {
    padding: (1px * @counter);
  }
  .p-t-@{counter} {
    padding-top: (1px * @counter);
  }
  .p-r-@{counter} {
    padding-right: (1px * @counter);
  }
  .p-b-@{counter} {
    padding-bottom: (1px * @counter);
  }
  .p-l-@{counter} {
    padding-left: (1px * @counter);
  }
  .m-@{counter} {
    margin: (1px * @counter);
  }
  .m-t-@{counter} {
    margin-top: (1px * @counter);
  }
  .m-r-@{counter} {
    margin-right: (1px * @counter);
  }
  .m-b-@{counter} {
    margin-bottom: (1px * @counter);
  }
  .m-l-@{counter} {
    margin-left: (1px * @counter);
  }
  .fz-@{counter} {
    font-size: (1px * @counter);
  }
  .width@{counter} {
    width: (1% * @counter);
  }
  .loopStyle((@counter - 1)); // 递归调用自身
}

.loopStyle(100);

.scoll-warp {
  &::-webkit-scrollbar {
    overflow: visible;
    width: 6px;
    height: 6px;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #a5b2d2;
    min-height: 15px;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-track {
    background-color: #e8edf2;
    border-radius: 2px;
  }
}
